html {
    font-size: 13.3333333333vw;
    height: 100%;
    body {
        height: 100%;
        display: flex;
        flex-direction: column;
        header {
            height: 3.21rem;
            background: #3f454f;
            border-bottom: .04rem solid #f5f5f9;
            box-sizing: border-box;
            padding: 0 .33rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .header_top {
                display: flex;
                justify-content: space-between;
                .header_top_left {
                    a {
                        width: 1.22rem;
                        display: flex;
                        justify-content: space-between;
                        i {
                            font: .4rem/.86rem "";
                            color: #fff;
                        }
                        span {
                            font: .3rem/.86rem "";
                            color: #fff;
                        }
                    }
                }
                .header_top_right {
                    width: 2.02rem;
                    display: flex;
                    justify-content: space-between;
                    a {
                        font: .4rem/.86rem "";
                        color: #fff;
                    }
                }
            }
            .header_bottom {
                display: flex;
                justify-content: space-between;
                a {
                    width: 25%;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    i {
                        font: .7rem/.8rem "";
                        color: #fff;
                    }
                    span {
                        font: .3rem/.76rem "";
                        color: #fff;
                    }
                    em {
                        width: .29rem;
                        height: .29rem;
                        border-radius: 50%;
                        font: .18rem/.29rem "";
                        color: #fff;
                        position: absolute;
                        right: .30rem;
                        top: -.1rem;
                        background: red;
                        text-align: center;
                    }
                }
                 :nth-of-type(3) {
                    position: relative;
                }
                .chui {
                    div {
                        width: 0.8rem;
                        height: 0.8rem;
                        border-radius: 50%;
                        background: url(../卤蛋.png) no-repeat 0 0/.8rem .8rem;
                        border: .01rem solid #fff;
                        box-sizing: border-box;
                    }
                }
            }
        }
        section {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            overflow: auto;
            div {
                width: 25%;
                height: 1.81rem;
                border: .01rem solid #e6e6e6;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;
                &:nth-of-type(4n) {
                    border-right: none;
                }
                &:nth-of-type(4n-3) {
                    border-left: none;
                }
                a {
                    display: flex;
                    height: 100%;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    i {
                        font: .48rem/.72rem "";
                        color: #00CCFF;
                    }
                    span {
                        font: .26rem/.5rem "";
                        color: #333;
                    }
                }
            }
        }
        footer {
            height: 1rem;
            border-top: .01rem solid #d9d9d9;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            padding: .14rem 0 .09rem;
            div {
                width: 25%;
                &:nth-of-type(2) {
                    a {
                        position: relative;
                        em {
                            width: 0.16rem;
                            height: 0.16rem;
                            background-color: red;
                            border-radius: 50%;
                            position: absolute;
                            left: 58%;
                            top: .05rem;
                        }
                    }
                }
                &:nth-of-type(3) {
                    a {
                        position: relative;
                        em {
                            width: 0.29rem;
                            height: 0.29rem;
                            background-color: red;
                            border-radius: 50%;
                            position: absolute;
                            left: 55%;
                            top: -.1rem;
                            font: .18rem/.29rem "";
                            text-align: center;
                            color: #fff;
                        }
                    }
                }
                a {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    i {
                        font: .44rem/.5rem "";
                        color: #929292;
                    }
                    span {
                        font: .2rem/.26rem "";
                        color: #929292;
                    }
                }
            }
            .mouse {
                color: #00CCFF;
            }
        }
    }
}